<template>
  <div class="">
    <el-button type="text" @click="dialogTableVisible = true"  
      >{{data.node}}</el-button
    >
    <el-dialog title="进度" :visible.sync="dialogTableVisible" append-to-body="false">
      <div class="block">
        <el-timeline>
          <el-timeline-item :type="data.node=='已完结'? 'primary' :''" placement="bottom">
            <div class="titlebox">
              <span>完结</span><span style="margin-right: 30px">时间</span>
            </div>
            <el-card>
              <h4>更新 Github 模板</h4>
              <p>王小虎 提交于 2018/4/12 20:46</p>
            </el-card>
          </el-timeline-item>
          <el-timeline-item placement="top" :type="data.node=='受理中'? 'primary' :''">
            <div class="titlebox">
              <span>受理</span><span style="margin-right: 30px">时间</span>
            </div>
            <el-card>
              <h4>更新 Github 模板</h4>
              <p>王小虎 提交于 2018/4/3 20:46</p>
            </el-card>
          </el-timeline-item>
          <el-timeline-item placement="top" :type="data.node=='已发起'? 'primary' :''">
            <div class="titlebox">
              <span>发起</span><span style="margin-right: 30px">时间</span>
            </div>
            <el-card>
              <h4>更新 Github 模板</h4>
              <p>王小虎 提交于 2018/4/2 20:46</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props:["data"],
  components: {},
  data() {
    return {
      dialogTableVisible: false,
    };
  },
  //监听属性 类似于data概念
  computed: {
    isNode(){
      return this.data.node=="已完结";
    }
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
  },
};
</script>
<style lang='css' scoped>
.titlebox {
  display: flex;
  justify-content: space-between;
}
::v-deep .el-timeline-item__timestamp.is-top {
  padding: 0;
}
</style>